<template>
  <div class="main">
    <div class="site-content">
      <section-title>
        <div class="tag-header">
          <h1 class="title">标 签</h1>
        </div>
      </section-title>
      <!---说明--->
      <div class="statement">
        <quote>
          <p>唯有热爱，能抵岁月漫长</p>
        </quote>
      </div>
      <!----->
      <hr />

      <div class="tag-list">
        <el-tag v-for="(tag,index) in list" :key="index" @click="toTagArticle(tag.id,tag.name)" type="info" effect="plain" style="margin:10px" class="tag">
          {{ tag.name }}(n)
        </el-tag>

      </div>
    </div>
  </div>
</template>

<script>
import sectionTitle from '@/components/section-title'
import Quote from "@/components/quote";
import { getTagAndCount } from '../api/tag'
export default {
  name: "Tag",
  data() {
    return {
      list: []
    }
  },
  components: {
    Quote,
    sectionTitle
  },
  methods: {
    toTagArticle(id,tagName) {
      this.$router.push({ name: 'tagArticle', params: { tagId: id,tagName: tagName } }).catch(data => { });  //最后的catch是为了防止重复push相同的路由报错警告
    },
    getTagAndCount() {
      this.$store.dispatch('setLoading', true);
      getTagAndCount().then(response => {
        this.list = response.data.data.result;
        this.$store.dispatch('setLoading', false);
      });
    }
  },
  mounted() {
    this.getTagAndCount();
  }
}
</script>

<style scoped lang="less">
.main {
  padding-top: 40px;
}
.tag-header {
  width: 100%;
  align-items: center;
  margin-top: 80px;
  font-weight: 400;
  .title {
    text-align: center;
    font-size: 30px;
  }
}
.statement {
  margin: 60px 0 20px 0;
  a {
    color: #ff6d6d;
  }
  p {
    line-height: 2rem;
  }
}
.tag-list {
  margin-top: 40px;
  margin-bottom: 30px;
  text-align: center;
}
.tag {
  cursor: pointer;
  font-size: 18px;
  border-radius: 5rem;
}
.tag:hover {
  box-shadow: 0 0 3px rgb(0, 0, 0);
  background: #e0e0e06b;
}

hr {
  margin: 40px 0;
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(255, 109, 109, 0.75),
    rgba(0, 0, 0, 0)
  );
}
/*******/
@media (max-width: 800px) {
  .tag-header {
    margin-top: 0;
  }
}
</style>
